<template>
	<div class="list" ref="wrapper">
	  <div>
		<div class="present-area">
			<div class="present-title" ref="present">当前</div>
			<div class="present-button"
			@click="handlePresentClick"
			>{{this.$store.state.city}}</div>
		</div>
		<div class="hot-area">
			<div class="hot-tilte">热门城市</div>
			<div class="hot-list" >
				<div class="hot-button" 
				v-for="item of hotCities" 
				:key="item.id"
				@click="handleCurrentClick(item.name)"
				>{{item.name}}</div>
			</div>
		</div>
		<div class="alph-area">
			<div class="alph-swiper" v-for="(item,key) of cities" :key="key" :ref="key">
				<div class="alph-title">{{key}}</div>
				<div class="alph-list">
					<div class="alph-button border-bottom" 
					v-for="inneritem of item" 
					:key="inneritem.id"
					@click="handleAlphClick(inneritem.name)"
					>{{inneritem.name}}</div>
				</div>
			</div>
		</div>
	  </div>
	</div>
</template>

<script>
import BScroll from 'better-scroll'
import BMap from 'BMap'
export default {
  name: 'locationList',
  props:{
	  letter:String,
	  cities:Object,
	  hotCities:Array
  },
  methods:{
	  handleCurrentClick(city){
		  this.$store.dispatch('change',city)
		  this.$router.push('/')
	  },
	  handleAlphClick(city){
		  this.$store.dispatch('change',city)
		  this.$router.push('/')
	  },
	  handlePresentClick(){
		  this.$router.push('/')
	  }
  },
  watch:{
	  letter(){
		  // console.log(this.letter)
		  const elementLetter = this.$refs[this.letter]
		  const elementPresent = this.$refs.present
		  if(elementLetter){
			  const element = elementLetter[0]
			  this.scroll.scrollToElement(element)
		  }else{
			  this.scroll.scrollToElement(elementPresent)    //这个用法不知道
		  }
	  }
  },
  data(){
	  return{
		  cityName:''
	  }
  },
  mounted(){
	this.scroll = new BScroll(this.$refs.wrapper,{
		click:true,
		mouseWheel:{
			speed:20,
			invert:false,
			easeTime:300
		}
	})
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.border-bottom
	&:before
		border:.04rem solid #CCCCCC 
.list	
	background:#e9ebf3
	position:absolute
	width:100% 
	top:1.12rem
	left:0
	bottom:0 
	overflow:hidden 
	.hot-list
		overflow:hidden 
	.present-title,.hot-tilte,.alph-title
		margin-left:.3rem
		padding:.3rem 0 
	.hot-tilte
		padding-bottom:.1rem 
	.present-button,.hot-button,.alph-button
		line-height:.44rem 
		background:#FFFFFF
		padding:.2rem .2rem
	.present-button
		width:85%
		margin-left:.2rem 
	.hot-button
		width:15%
		float:left 
		margin-left:.2rem 
		text-align:center
		margin-top:.18rem 
	.alph-button
		width:100% 
</style>
